<template>
  <div class="bg-background-800 rounded-xl p-4 shadow-lg border border-background-700">
    <!-- 回复信息 -->
    <div v-if="comment.parentComment" class="mb-3 p-3 bg-background-700 rounded-lg border-l-4 border-primary-500">
      <div class="text-xs text-text-muted mb-1">回复 {{ comment.parentComment.user.name }}</div>
      <div class="text-sm text-text-secondary whitespace-pre-wrap">{{ comment.parentComment.content }}</div>
    </div>

    <!-- 父评论已删除提示 -->
    <div v-else-if="comment.parentId" class="mb-3 p-3 bg-background-700 rounded-lg border-l-4 border-gray-500">
      <div class="text-xs text-text-muted">回复的评论已删除</div>
    </div>

    <!-- 电影信息 -->
    <div v-if="comment.movie" class="flex items-center gap-3 mb-4 p-3 bg-background-700 rounded-lg">
      <img 
        :src="comment.movie.coverUrl" 
        :alt="comment.movie.title"
        class="w-12 h-16 object-cover rounded-lg"
      />
      <div class="flex-1">
        <div class="text-text-primary font-medium text-sm">{{ comment.movie.title }}</div>
        <div class="text-text-muted text-xs">评论于 {{ formatTime(comment.createdAt) }}</div>
      </div>
    </div>

    <!-- 电影已删除提示 -->
    <div v-else class="flex items-center gap-3 mb-4 p-3 bg-background-700 rounded-lg">
      <div class="w-12 h-16 bg-background-600 rounded-lg flex items-center justify-center">
        <svg class="w-6 h-6 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 15c-2.34 0-4.47-.881-6.08-2.33" />
        </svg>
      </div>
      <div class="flex-1">
        <div class="text-text-muted font-medium text-sm">电影已删除</div>
        <div class="text-text-muted text-xs">评论于 {{ formatTime(comment.createdAt) }}</div>
      </div>
    </div>

    <!-- 评论内容 -->
    <div class="text-text-secondary mb-4 whitespace-pre-wrap">{{ comment.content }}</div>

    <!-- 交互信息 -->
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-4 text-sm text-text-muted">
        <div class="flex items-center gap-1">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
            <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
          </svg>
          <span>{{ comment.likes }}</span>
        </div>
        <div class="flex items-center gap-1">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
            <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z" />
          </svg>
          <span>{{ comment.dislikes }}</span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex items-center gap-2">
        <UiButton 
          @click="goToMovie"
          variant="secondary"
          size="sm"
          :disabled="!comment.movie"
          :title="!comment.movie ? '电影已删除' : '查看电影'"
        >
          {{ comment.movie ? '查看电影' : '电影已删除' }}
        </UiButton>
        <UiButton 
          v-if="canDelete"
          @click="handleDelete"
          variant="danger"
          size="sm"
        >
          删除
        </UiButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUiStore } from '../../store/useUiStore'
import type { Comment } from '../../types/ui'
import { UiButton } from '../ui'

const props = defineProps<{
  comment: Comment
  canDelete?: boolean
}>()

const emit = defineEmits<{
  delete: [commentId: number]
}>()

const router = useRouter()
const uiStore = useUiStore()

// 调试信息
onMounted(() => {
  console.log('UserCommentCard mounted:', {
    commentId: props.comment.id,
    canDelete: props.canDelete,
    commentUserId: props.comment.userId
  })
})

const formatTime = (dateString: string): string => {
  const date = new Date(dateString)
  const now = new Date()
  const diffInHours = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60))
  
  if (diffInHours < 1) {
    return '刚刚'
  } else if (diffInHours < 24) {
    return `${diffInHours}小时前`
  } else {
    const diffInDays = Math.floor(diffInHours / 24)
    return `${diffInDays}天前`
  }
}

const goToMovie = () => {
  if (props.comment.movie) {
    router.push(`/movie/${props.comment.movie.id}`)
  }
}

const handleDelete = () => {
  console.log('UserCommentCard handleDelete called:', {
    commentId: props.comment.id,
    canDelete: props.canDelete
  })
  
  if (!props.canDelete) {
    uiStore.showWarning('您没有权限删除此评论')
    return
  }
  
  if (confirm('确定要删除这条评论吗？')) {
    emit('delete', props.comment.id)
  }
}
</script>